
<template>
	<div class="myContent">
		<div class="centent" v-if="afterSaleInfo" style="text-align: left;">
			<!--物流信息-->
			<div class="order_logistics_box">	
                 <!-- v-if="returnStatus.length != 0" -->
				<div class="delivery_box" v-if="false">
					<ul class="delivery_list" >
                        <!-- :class="{start:index==0}" -->
						<li  v-for="(item,index) in returnStatus" :key='index'>
							<i class="line_icon"></i>
							<p>{{item.approvalStateStr}}</p>
							<div class="time">{{item.approvalDateStr}}</div>
						</li>
					</ul>
				</div>
                <zx-state-component :stateArr= "returnStatus" :allInfo="allInfo"></zx-state-component>
                <ul class="aui-list aui-list-in" id="afterSaleInfoD">
                    <li class="aui-list-item aui-list-item-arrow">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-title" >退款信息</div>																											<!--ticketList-->
                            <div class="aui-list-item-right">
                                
                            </div>
                        </div>
                    </li> 
                </ul>
				<ul class="aui-list aui-media-list commodity_list subtotal_list aui-margin-b-15">
					<li class="aui-list-item">
						<div class="aui-media-list-item-inner">
							<div class="aui-list-item-media">
								<!--<img :src="afterSaleInfo.goodsImg || 'static/image/demo1.png'">-->
								<img :src="afterSaleInfo.goodsImg  || 'static/image/demo2.png'">
							</div>
							<div class="aui-list-item-inner suggest">
								<!--<h3>商品标题最多可显示两行商品标题最多可显示两行</h3>-->
								<h3>{{afterSaleInfo.goodsName?afterSaleInfo.goodsName:''}}</h3>
								<!--<p v-if="afterSaleInfo.goodsSpec">规格：{{afterSaleInfo.goodsSpec}}</p>-->
								<p v-if="afterSaleInfo.buyType!=4">总价：¥{{getRealTotalMoney(afterSaleInfo)}}</p>  <!--Number(afterSaleInfo.goodsDealPrice).toFixed(2)-->
								<p v-if="afterSaleInfo.buyType==4">积分单价：{{afterSaleInfo.goodsDealPrice}}</p>
								<p v-if="afterSaleInfo.goodsType != 7">申请数量：{{afterSaleInfo.applyQuantity}}{{afterSaleInfo.goodsSpec}}</p>
								<p v-if="afterSaleInfo.goodsType == 7">申请重量：{{afterSaleInfo.actualWeight * 1000}}g</p>
							</div>
						</div>
					</li>
					<li class="message_list" style="position: relative;padding: 0 0.75rem;padding-bottom: 0.75rem;" v-if="sendArr && sendArr.length">
							<div class="aui-list-item-arrow01 server_show" style="background-color: #fff2f2;padding: 0.2rem 0.5rem;">
								<div style="margin-left: 15;" class="aui-list-item-arrow_2" >
									<h4>[赠品]</h4>
									<dl v-for="(item,index) in sendArr" :key="index">
										<dd>
											<font>{{item.goodsName}}</font>
											<span>¥{{item.goodsDealPrice}}×{{showNum(item)}}</span>
										</dd>
									</dl>
								</div>
							</div>
						</li>
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-text">
								<div class="aui-list-item-text" v-if="allInfo.orderType!=2">售后类型：{{allInfo.serviceType==1?"退款":"退货退款"}}</div>
								<div class="aui-list-item-text" v-if="allInfo.orderType==2">售后类型：{{allInfo.serviceType==1?"退积分":"退货退积分"}}</div>
							</div>
							<div class="aui-list-item-text">
								<div class="aui-list-item-text" v-if="allInfo.orderType!=2">申请金额：¥ {{allInfo.applyAmount?Number(allInfo.applyAmount).toFixed(2):'0.00'}}</div>
								<div class="aui-list-item-text" v-if="allInfo.orderType==2">申请积分：{{allInfo.applyAmount || 0}}</div>
							</div>
							<div class="aui-list-item-text">
								<div class="aui-list-item-text" v-if="allInfo.serviceType==2">退货编号：{{allInfo.serviceNo}}</div>
								<div class="aui-list-item-text" v-if="allInfo.serviceType==1">退款编号：{{allInfo.serviceNo}}</div>
							</div>
							<div class="aui-list-item-text">
								<!--<div class="aui-list-item-text">申请时间：2017-09-05&nbsp;21：24：23</div>-->
								<div class="aui-list-item-text">申请时间：{{getTime(allInfo.applyTm)}}</div>
							</div>
							<div class="aui-list-item-text" v-if="allInfo.serviceType && allInfo.serviceReason">
								<!--<div class="aui-list-item-text">退货说明：退货原因退货原因退货原因退货原因...</div>-->
								<div class="aui-list-item-text" v-if="allInfo.serviceType==2">退货原因：{{allInfo.serviceReason}}</div>
								<div class="aui-list-item-text" v-if="allInfo.serviceType==1">退款原因：{{allInfo.serviceReason}}</div>
							</div>
							<div class="aui-list-item-text" v-if="allInfo.serviceType && allInfo.goodsReturnWay">
								<!--<div class="aui-list-item-text">退货说明：退货原因退货原因退货原因退货原因...</div>-->
                                <!-- allInfo.serviceType==2   5.24 产品要求将配送员上门取件默认为用户选择的方式 不给用户选择展示 -->
								<div class="aui-list-item-text" v-if="false">退回方式：{{getGoodsReturnWay(allInfo.goodsReturnWay)}}</div>
							</div>
							<div class="aui-list-item-text" v-if="allInfo.serviceType && allInfo.serviceType==2">
								<div class="aui-list-item-text">质量情况：{{allInfo.packing==0?"质量完好":"质量不好"}}</div>
							</div>
							<div class="aui-list-item-text" v-if="allInfo.serviceDesc">
									<!--退货原因-->
								<div class="aui-list-item-text">{{allInfo.serviceType==1?'退款':'退货'}}说明：{{allInfo.serviceDesc}}</div>
							</div>
							<div class="aui-list-item-text" v-if="getImg.length>0 && allInfo.serviceType && allInfo.serviceType==2">
								<div class="aui-list-item-text">退货凭证：</div>
							</div>
							<div class="aui-card-list-content-padded aui-border-b aui-border-t aui-padded-0">
								<!---->
								<div class="aui-row aui-row-padded" style="display:flex;flex-flow:row wrap;">
									<!--class="aui-col-xs-4"-->
									<div class="aui-col-xs-4 imgItem"  @click.stop="getImgCover(imgUrl)"  v-for="(imgUrl,index) in getImg" :key='index' style="padding-bottom: 33.33333333%;height: 0;overflow: hidden;">
										<img :src="imgUrl || 'static/image/demo2.png'" />
										<!--<div :style="{backgroundImg:`url(${imgUrl || 'static/image/demo1.png'})`}" class="backgroundShowPic">asadasdaasas</div>-->
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<ul class="aui-list aui-media-list commodity_list subtotal_list" v-if="false">
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-text">
								<!--{{afterSaleInfo.shopName}}-->
								<div class="aui-list-item-text" >店铺名称：{{allInfo.shopName}}</div>
							</div>
							<div class="aui-list-item-text">
								<div class="aui-list-item-text">实际金额：¥ {{allInfo.realityAmount?Number(allInfo.realityAmount).toFixed(2):'0.00'}}</div>
							</div>
							<div class="aui-list-item-text">
								<!--<div class="aui-list-item-text">回复时间：2017-09-05&nbsp;21：24：23</div>-->
								<!--<div class="aui-list-item-text">回复时间：{{getTime(afterSaleInfo.replyTm)}}</div>-->
							</div>
						</div>
					</li>
				</ul>
			</div>
			<!--物流信息 end--> 
		</div>
		<!--图片弹出层-->
		<div v-if="checkIMg" @click.stop="hideImgCover" class="showImg" :style="{'width': zxPageWidth+'px','height':zxPageHeight+'px'}">
			<!--遮罩-->
			<div class="zxCover" :style="{'width': zxPageWidth+'px','height':zxPageHeight+'px'}"></div>
			<img class="centerImg" :src="coverImg"/>
		</div>
	</div>
</template>

<script>
	import {mapGetters,mapActions} from 'vuex';
	import axios from "axios";
    import afterSaleState from './afterSaleDetailState';
    import getUrl from '../../utils/getUrlSearch.js';
    import { CHANGE_NAVIGATION,EXIT_WEBVIEW } from '../../config/postMessage-types';
    
	// import goOnlineServer from '@/utils/ZWY/onlineServer';
	const api = window.api;
	export default {
		data(){
			return {
				afterSaleInfo:{},
				returnStatus:[],
//				serverType:'退货退款',
				serviceNo:null,
				shopingObj:{
					unit:'',
					goodsSpec:'',
					goodsImg:''
				},
				getImg:[],
				checkIMg:false,
				coverImg:'',
				sendArr:[],  // 赠品数组
				allInfo:{}	//申请售后的所有返回信息
			}
		},
		methods:{
            // online() {
			// 	goOnlineServer(this)
			// },
			goBack(){
				this.$router.replace({path:'afterSaleList',query:{activeIndex:1,orderSubNo:this.$route.query.orderSubNo}});
			},
			//显示遮罩层
			getImgCover(imgUrl){
				this.checkIMg = true;
				this.coverImg = imgUrl;
			},
			//隐藏遮罩层
			hideImgCover(){
				this.checkIMg = false;
				this.coverImg = '';
			},
			getCusImg(str){
				 if(str){
				 	this.getImg = str.split(',');
				 }
			},
			getRealTotalMoney(item){
				var price = '';
				if(item.goodsType == 7){
					price = item.actualWeight * item.goodsDealPrice;
				}else{
					price = item.applyQuantity * item.goodsDealPrice;
				}
				
				return Number(price).toFixed(2);
			},
			showNum(item){
				var num = null;
				if(item.goodsType == 7){
					num = item.actualWeight + item.goodsSpec;
				}else{
					num = item.applyQuantity;
				}
				return num;
			},
			getGoodsReturnWay(type){
				if(type == 1){
					return '配送员上门取件';
				}else if(type == 2){
					return '自行送货至门店';
				}
			},
			getAfterSale(){
				//省悟		/afterSaleslectAfterSalesList
				let url = window.api.service_host+"/afterSales/selectAfterSalesList";
				// serviceNo为售后单号  orderNo为订单号
				let params = this.serviceNo ? {serviceNo:this.serviceNo } : {orderNo:this.orderNo }
				let config = {
					url: url,
					params,
					headers: {
						'sessionId': this.sessionId,
						'Content-Type': 'application/json',
						'Accept': 'application/json'
					},
					method:"GET"
				};
				axios(config).then((res)=>{
					this.allInfo = res.data.data[0];
					var arr = res.data.data[0].goodsList;
					 
					for(let i = 0; i < arr.length; i++){
					 	if(arr[i].buyType == 1 || arr[i].buyType == 2 || arr[i].buyType == 4){
					 		this.afterSaleInfo = arr[i];
					 	}
					 	if(arr[i].buyType == 3){
					 		this.sendArr.push(arr[i]);
					 	}
					}
					 
					console.log(res.data.data[0],'请求售后信息')
					console.log(this.afterSaleInfo,'请求')
					this.getCusImg(this.allInfo.voucherPhoto);
				})
            },
            
			getReturnStatus(){
				//志道
				this.serviceNo = this.serviceNo ? this.serviceNo : this.orderNo
				let url = window.api.service_host+"/afterSales/qryAfterSalesApproval/"+this.serviceNo ;
				let config = {
					url: url,
					headers: {
						'sessionId': this.sessionId,
						'Content-Type': 'application/json',
						'Accept': 'application/json'
					},
					method:"GET"
				};
				axios(config).then((res)=>{
                    this.returnStatus = res.data.data;
                    //  this.returnStatus = [
                    // {
                    //     approvalDate:1519463685020,
                    //     approvalDateStr:"2018-02-24 17:18:45",
                    //     approvalState:"13",
                    //     approvalDetail:"上门取件"
                    // },
                    // {
                    //     approvalDate:1519463685020,
                    //     approvalDateStr:"2018-02-24 17:18:45",
                    //     approvalState:"16",
                    //     approvalDetail:"上门取件"
                    // },
                    // {
                    //     approvalDate:1519463685020,
                    //     approvalDateStr:"2018-02-24 17:18:45",
                    //     approvalState:"3",
                    //     approvalDetail:"上门取件"
                    // },
                    
                    // {
                    //     approvalDate:1519463685020,
                    //     approvalDateStr:"2018-02-24 17:14:45",
                    //     approvalState:"2",
                    //     approvalDetail:"客服审核"
                    // },
                    // {
                    //     approvalDate:1519463685020,
                    //     approvalDateStr:"2018-02-24 17:14:45",
                    //     approvalState:"1",
                    //     approvalDetail:"申请售后"
                    // }
                    // ]
				})
			},
			getQuery(){
                // let obj = this.$route.query;
                let obj = getUrl();
				this.orderNo = obj.orderNo;
				this.serviceNo = obj.serviceNo;
			},
			//转换时间格式
			getTime(param){
			  if(param){
			  	  let date = new Date(param);
				  let year = date.getFullYear();
				  let month = checkTime(date.getMonth() + 1);
				  let day = checkTime(date.getDate());
				  let hour = checkTime(date.getHours());
				  let min = checkTime(date.getMinutes());
				  let sec = checkTime(date.getSeconds());

				  function checkTime(i) {
				    if (i < 10) {
				      i = '0' + i;
				    }
				    return i;
				  }

				  return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
			   }else{
			   	  return '';
			   }
			}
		},
		components: {
            "zx-state-component": afterSaleState,
		},
		created() {
            let titleConfig = JSON.stringify({
                type: CHANGE_NAVIGATION,
                params: {
                    title: "售后详情"
                }
            })
            setTimeout(() => {
                window.postMessage(titleConfig)
            },300)
			this.getQuery();
			this.getAfterSale();
			this.getReturnStatus();
		},
		computed: {
            ...mapGetters("wxh", [
				"sessionId",
				"userInfo"
			]),
			zxPageHeight(){
				return window.screen.height;
			},
			zxPageWidth(){
				return window.screen.width;
			},
			afterSaleGoodsInfo(){
				return this.allInfo;
			}
		},
	}
</script>

<style scoped="scoped">
	.showImg{
		position: fixed;
		top: 0;
        left: 0;
		z-index: 100;
	}
	.zxCover{
		position: absolute;
		top: 0;
		left: 0;
		background: black;
        opacity: 0.5;
	}
	.centerImg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
	}
	.myContent {
		width: 100%;
        overflow-y: auto;
	}
	.server_show::after{
		border: 0px solid;
	}
    .kf {
		position: absolute;
		margin-top: 0.35rem;
		top: 3px;
		right: 1rem;
		padding: 0 0.35rem;
		background: #38B035;
		border-radius: 3px;
		color: #ffffff;
		height: 2rem;
		line-height: 2.4rem
	}
	.kf i {
		font-size: 1.4rem;
		font-weight: 100;
		background: #38B035;
	}
    #afterSaleInfoD .aui-list-item-arrow:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        right: .75rem;
        margin-top: -.2rem;
        background: 0 0;
        border: 1px solid #ddd;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
   
</style>

